<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <!-- 左侧列表-->
        <div class="header-left-one">
          <div v-for="item in titleList" @click="selectLeft(item.index)">
            <img :src="item.imgUrl" class="header-left-one-img"/>
            <div v-if="item.index === leftIndex">
              <div class="header-left-one-name" style="color: #F0AC94;cursor:pointer;">{{ item.name }}</div>
            </div>
            <div v-else>
              <div class="header-left-one-name" style="curdor:pointer">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!-- 右侧列表-->
        <div class="header-left-two">
          <div v-if="leftIndex === 0" style="margin: 100px auto;">
            <el-carousel height="600px" arrow="always" indicator-position="outside">
              <el-carousel-item v-for="item in dataImgs" :key="item">
                <img :src="item" style="max-height: 600px">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div v-else>
            <div class="header-left-two-title">
              Welcome to
              <span2>A</span2>ging<span3>
              A</span3>tlas
            </div>
            <div v-for="item in titleMessage">
                <div v-if="item.index === leftIndex-1">
                  <div style="font-size: 24px;font-weight: bold;margin-top: 30px">{{item.name}}</div>
                  <div style="font-size: 24px;font-weight: bold;margin-top: 30px">{{item.desc}}</div>
                  <div style="width: 90%;font-size: 18px;;margin: 30px auto">{{item.remark}}</div>
                  <div v-if="item.index === 5">
                    <img :src="item.imgUrl" style="max-width: 300px;max-height: 350px; display:block; margin:0 auto;"/>
                  </div>
                  <div v-else>
                    <img :src="item.imgUrl" style="max-width: 590px;max-height: 650px; display:block; margin:0 auto;"/>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div  class="header-right">
          <div class="header-right-one">
            <div class="header-left-two-title">
              Welcome to
              <span2>A</span2>ging<span3> A</span3>tlas
            </div>
            <div style="margin: 40px auto;width: 90%;font-size: 14px;max-height: 430px;line-height: 1.6">
              Aging Atlas aims to compile large gene expression and regulation datasets created by a range of high-throughput omics technologies and serve as a valuable resource for a range of life science researchers. The current implementation includes five modules: transcriptomics, epigenomics, single-cell transcriptomics, proteomics, and pharmacogenomics. Aging Atlas provides user-friendly functionalities to explore age-related changes in gene expression and provides download services for raw multi-omics data from aging-related research.
            </div>
          </div>
          <div class="header-right-two">
            <div style="font-size: 24px;font-weight: bold;width:90%;border-bottom: 1px solid #C1C1C1;margin: 20px auto">Gene of the Month</div>
            <div style="width:90%;margin: 20px auto">
              <span style="font-weight: bold">Gene name</span>: DDX58
            </div>
            <div style="width:90%;margin: 20px auto;">
              <span style="font-weight: bold">Description for this gene:</span>
              <span style="line-height: 2">DEAD box proteins, characterized by the conserved motif Asp-Glu-Ala-Asp (DEAD), are putative RNA helicases which are implicated in a number of cellular processes involving RNA binding and alteration of RNA secondary structure. This gene encodes a protein containing RNA helicase-DEAD box protein motifs and a caspase recruitment domain (CARD). It is involved in viral double-stranded (ds) RNA recognition and the regulation of immune response. [provided by RefSeq, Jul 2008]</span>
            </div>
         </div>
        <div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  components: {},
  data() {
    return {
      leftIndex: 0,
      //左侧列表
      titleList: [
        {
          'index': 0,
          'name': ' Latest Data ',
          'imgUrl': 'http://170.106.188.80/image/LATEST-01.svg'
        },
        {
          'index': 2,
          'name': ' Transcriptomics ',
          'imgUrl': 'http://170.106.188.80/image/RNA-01.svg'
        },
        {
          'index': 3,
          'name': ' Epigenomics ',
          'imgUrl': 'http://170.106.188.80/image/CHIP-01.svg'
        },
        {
          'index': 4,
          'name': ' Single-cell transcriptomics ',
          'imgUrl': 'http://170.106.188.80/image/SCRNA-01.svg'
        },
        {
          'index': 5,
          'name': ' Proteomics ',
          'imgUrl': 'http://170.106.188.80/image/PPI-01.svg'
        },
        {
          'index': 6,
          'name': '  Pharmacogenomics  ',
          'imgUrl': 'http://170.106.188.80/image/GC-01.svg'

        }
      ],
      //左侧内容
      titleMessage : [
        {
          index : 1,
          name :"Transcriptomics",
          desc : "(RNA-Seq)",
          remark :"The transcriptomics module catalogs genome-wide transcriptomic changes related to aging. This contains a list of differentially expressed genes (DEGs), fold changes, and descriptions of underlying experimental conditions.",
          imgUrl : "http://170.106.188.80/image/index_rna_seq.png"
        },
        {
          index : 2,
          name :"Epigenomics",
          desc : "(ChIP-Seq)",
          remark :"The epigenomics module contains Chromatin Immunoprecipitation Sequencing (ChIP-Seq) datasets and reflects how specific aging-related loci are regulated by histone modifications and transcription factors.\n",
          imgUrl : "http://170.106.188.80/image/index_chip_seq.png"
        },
        {
          index : 3,
          name :"Single-cell Transcriptomics",
          desc : "(scRNA-Seq)",
          remark :"The single-cell transcriptomics module systematically reflects the tissue- and cell type-specific heterogeneous changes in gene expression with age. This module provides high-resolution comprehensive reference maps of different cell types/subtypes, as well as information on their temporal and spatial distributions and gene expression patterns under different aging-related or disease conditions.",
          imgUrl : "http://170.106.188.80/image/index_single_cell.png"
        },
        {
          index : 4,
          name :"Proteomics",
          desc : "(Protein-protein Interaction)",
          remark :"The proteomics module focuses on datasets that reflect physical protein associations and helps to build protein-protein interaction networks.",
          imgUrl : "http://170.106.188.80/image/index_proteins_interaction.png"
        },
        {
          index : 5,
          name :"Pharmacogenomics",
          desc : "(Geroprotective Compounds)",
          remark :"The pharmacogenomics module focuses on geroprotectors. Currently, the module has a list of hundreds of compounds and contains omics datasets from drug therapy analysis (both in vivo and in vitro), revealing changes in gene regulation and expression caused by the supplementation of specific lifespan/healthspan-extending drugs.\n",
          imgUrl : "http://170.106.188.80/image/index_compounds.jpg"
        }
      ],
      dataImgs : [
        "http://170.106.188.80/image/home_center_01.jpg",
        "http://170.106.188.80/image/home_center_02.jpg",
        "http://170.106.188.80/image/home_center_03.jpg",
        "http://170.106.188.80/image/home_center_04.jpg",
        "http://170.106.188.80/image/home_center_05.jpg",
        "http://170.106.188.80/image/home_center_06.jpg",
      ]
    }
  },
  methods: {
    selectLeft(index) {
      this.leftIndex = index
    }
  }
}
</script>

<style>
.header-right-two {
  width: 90%;
  margin: 40px auto;
  border: 2px dashed #C1C1C1;
  border-radius: 10px;
}

.header-right-one {
  width: 90%;
  margin: 0 auto;
  border: 2px dashed #C1C1C1;
  border-radius: 10px;
  text-align: center;
}
.header-right {
  width: 30%;
  margin-left: 40px;
  max-height: 900px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #fff;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #fff;
}

span3 {
  color: lightseagreen;
}

span2 {
  color: orange;
}

.header-left-two-title {
  margin-top: 30px;
  font-size: 30px;
  font-weight: bold;
}

.header-left-two {
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.header-left-one-img {
  height: 60px;
  margin-top: 40px;
  cursor: pointer;
}

.header-left-one {
  width: 30%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border-right: 3px solid #C1C1C1;
}

.header-left {
  display: flex;
  width: 70%;
  border: 2px dashed #C1C1C1;
  border-radius: 10px;
  max-height: 900px;
}

.header {
  display: flex;
  width: 95%;
  margin: 100px auto;
}

.container {
  width: 100%;
  margin-bottom: 200px;
}

</style>



